import { createSlice } from "@reduxjs/toolkit";
import { componentsData } from "../data/tmp";

const tmp = createSlice({
  name: "tmp",
  initialState: {
    // 左侧 基础组件列表
    componentsData: componentsData,
    // 中间编辑画布区的组件 列表
    componentList: [],
    // 当前选种组件的Item数据
    currentcomponent: null,
    // 当前选种组件的Id
    currentCptId: null,
    // 右键菜单
    menuInfo: {
      // 显示隐藏
      showMenu: false,
      menuLeft: 120,
      menuTop: 0,
    },
    showMenu: false,
    menuLeft: 120,
    menuTop: 0,

    color: {
      r: 255,
      g: 255,
      b: 255,
      a: 1.0,
    },
  },
  reducers: {
    addItem(state, item) {
      state.componentList.push(item.payload);
    },
    // 设置当前选种组件id
    setCurrItemId(state, item) {
      state.currentCptId = item.payload;
      const item1 = state.componentList.find(
        (item) => item.id === state.currentCptId
      );
      state.currentcomponent = item1;
    },
    setCurrItem(state, item) {
      state.currentcomponent = item.payload;
    },
    getCurrItem(state) {
      const item = state.componentList.find(
        (item) => item.id === state.currentCptId
      );
      return item;
    },
    //更新组件数据
    updateItem(state, data) {
      // 通过当前id找到当前选种的组件数据
      // console.log(data.payload);

      const item = state.componentList.find(
        (item) => item.id === state.currentCptId
      );
      item.style = { ...item.style, ...data.payload };
      // console.log(item.style, "item.style");
      state.currentcomponent = item;
    },
    showMenu(state, data) {
      state.menuInfo = { ...data.payload, showMenu: true };
    },
    delIterm(state) {
      // 组件删除
      const index = state.componentList.findIndex(
        (item) => item.id == state.currentcomponent.id
      );
      state.componentList.splice(index, 1);
      state.showMenu = false;
    },
    //清空画布组件得方法
    alldel(state) {
      state.componentList = [];
    },
    changeshowmenu(state, data) {
      state.menuLeft = data.payload.left;
      state.menuTop = data.payload.top;
      state.showMenu = true;
    },
    //关闭右键菜单
    closemenus(state) {
      state.showMenu = false;
      state.menuInfo.showMenu = false;
    },
    // 改变宽高
    changeWidth(state, w) {
      const index = state.componentList.findIndex(
        (item) => item.payload.id == state.currentcomponent.id
      );
      state.componentList[index].payload.style.width = w.payload;
    },
    changeHeight(state, h) {
      const index = state.componentList.findIndex(
        (item) => item.payload.id == state.currentcomponent.id
      );
      state.componentList[index].payload.style.height = h.payload;
    },
    changeTop(state, t) {
      const index = state.componentList.findIndex(
        (item) => item.payload.id == state.currentcomponent.id
      );
      state.componentList[index].payload.style.top = t.payload;
    },
    changeLeft(state, l) {
      const index = state.componentList.findIndex(
        (item) => item.payload.id == state.currentcomponent.id
      );
      state.componentList[index].payload.style.left = l.payload;
    },
    CropperI(state, I) {
      state.componentList.push(I);
    },
    //把扣图结果 插入到画布里
    addimagecanvas(state, data) {
      // console.log(data, 'addimagecanvas')
      //找到抠图图片下标
      const index = state.componentList.findIndex(
        (item) => item.payload.id == state.currentcomponent.id
      );
      state.componentList[index].payload.propLable = data.payload;
    },
    thumeColor(state, item) {
      state.color = item.payload.rgb;
    },
    //添加动画
    addanimation(state, item) {
      if (item.payload.data) {
        const index = state.componentList.findIndex(e => e.id === state.currentcomponent.id);
        state.componentList[index].classNameList.push({
          name: item.payload.name,
          value: item.payload.value,
        });
        state.currentcomponent = state.componentList[index];
      } else {
        state.currentcomponent.PreviewAnimation = item.payload.value;
      }
    },
    //预览动画
    previewAnimation(state, item) {
      state.currentcomponent.PreviewAnimation = item.payload;
    },
  },
});

// 切片对象会【自动】的帮助我们生成action；切片对象存在属性actions
// actions中存储的是slice自动生成action创建器（函数），调用函数后会自动创建action对象
// action对象的结构 {type:name/函数名, payload:函数的参数}
export const {
  addItem,
  getCurrItem,
  setCurrItemId,
  showMenu,
  setCurrItem,
  updateItem,
  changeshowmenu,
  delIterm,
  alldel,
  closemenus,
  changeWidth,
  changeHeight,
  changeTop,
  changeLeft,
  CropperI,
  thumeColor,
  addimagecanvas,
  addanimation,
  previewAnimation,
} = tmp.actions;

export default tmp.reducer;
